<template>
  <div>
     <h1>手机管理主页面</h1>
  <div class="box_wrap">
    <div >
    
        <transition name="fade">
              <div id="box" v-if="flag" style="width: 300px;height: 300px;background: red;">
                盒子
              </div>
        </transition>
      <button @click="flag=!flag">显示隐藏</button>
      <!-- 跳转必传参的页面 -->
       <h1 @click="turnDeatail">跳转详情</h1>
   </div>
   <!-- 动画组 -->
   <div class="dong">
    <!--transition-group  过渡列表组件
    一般用来完成渲染列表的 动画  -->
      <transition-group  tag="ul"
      enter-active-class="animate__animated animate__slideInLeft"
      leave-active-class="animate__animated animate__slideOutRight">
         <li v-for="(item,index) in list" :key="index">{{item}}</li>
      </transition-group> 
       <button @click="changeData">显示隐藏</button>
   </div>
   <!-- 三级路由 -->
   <div class="three"> 
    <h1>三级路由出口</h1>
    <!-- 当前路由自定义信息获取 -->
     <h1>{{$route.meta.title}}</h1>
     <h1 v-if="$route.meta.isLogin">需要登录</h1>
     <router-view></router-view>
   </div>
  </div>
  </div>
</template>
<script>
export default {
  name: 'PhoneIndex',
  data(){
    return {
        flag:true,
        list:["烧烤","火锅","麻辣烫","小麦果汁"]
    }
  },
  mounted(){
    //在js中使用 当前跳转的路由 自定义的信息
    console.log(this.$route.meta.title)
  },
  methods:{
    changeData(){
      if(this.list.length>0){
        this.list=[]
      }else{
       this.list=["烧烤","火锅","麻辣烫","小麦果汁"]
      }
    
    },
    // 跳转详情必传参
      turnDeatail(){
        // 给必传参数传参
        // this.$router.push({
        //   path:`/layout/detail/188`
        // })
        // 
        // 使用name跳转 传必传参数
        this.$router.push({
          name:"Detail",
          params:{
            pid:188
          }
        })
      }
  
  }
}
</script>
<style lang="scss">
.box_wrap{
  display: flex;
  >div:nth-child(1){
    width: 400px;
  }
   >div:nth-child(2){
    width: 400px;
    height:500px;
    background: blue;

  }
    >div:nth-child(3){
    width: 400px;
    height:500px;
    background: pink;
    margin-left: 20px;

  }
}
  .fade-enter-active, .fade-leave-active {
    transition: opacity 1s;
}
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>